<template>
  <div class="content">
    <header>
      <p class="title">
         授权区域管理权限
      </p>
    </header>
    <section>
       <!-- <ul>
        	<li class="left_text">
            授权区域集合管理员
          </li>
          <li>
            <input placeholder="输入授权人员" type="text">
            <p>已选择：张三、李四、王五</p>
          </li>
          <li class="btn">列表选择</li>
        </ul> -->
        <ul>
        	<li>授权区域集合管理员</li>
          <li>
            <el-select v-model="select1" placeholder="请选择授权人员">
                <el-option
                  v-for="item in options1"
                  :key="item.id"
                  :label="item.real_name"
                  :value="item.id">
                </el-option>
              </el-select>
          </li>
        </ul>
        <ul>
        	<li>选择授权区域</li>
          <li>
            <el-select v-model="select2" placeholder="请选择授权区域">
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.region_name"
                  :value="item.id">
                </el-option>
              </el-select>
          </li>
        </ul>
        <ul class="btn">
        	<li></li>
          <li>
            <span @click="submit">确定</span>
            <span>取消</span>
          </li>
        </ul>
    </section>
  </div>
</template>

<script>
  import {auth_user_list,auth_region,seregion_list} from '../js/getApi.js'
  export default{
    data(){
      return{
        options1:[],
        select1:'',
        options2:[],
        select2:''
      }
    },
    methods:{
      submit(){
        auth_region(this.$store.state.token,this.select2,this.select1);
      }
    },
   async created() {
     const data=await auth_user_list(this.$store.state.token);
     const data1=await seregion_list(this.$store.state.token);
     this.options1=data;
     this.options2=data1;
    }
  }
</script>

<style scoped>
  header{
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 84px;
    color: rgba(5, 5, 5, 100);
    font-size: 16px;
    font-family: SourceHanSansSC-regular;
    border-bottom: 1px solid #F7F7F7;
  }
  section{
    margin-top: 30px;
  }
  section ul{
    display: flex;
    margin-bottom: 20px;
  }
  section ul li:nth-of-type(1){
    margin-top:8px;
    font-size: 14px;
    width:126px;
  }
  section ul li:nth-of-type(2){
     margin-left: 30px;
  }
  .btn{
    margin-top: 100px;
    margin-left: 30px;
  }
  .btn span{
    cursor: pointer;
  }
  .btn span:nth-of-type(1){
    display: inline-block;
    width: 100px;
    height: 34px;
    line-height:34px;
    border-radius: 2px;
    background-color: rgba(26, 188, 156, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
  }
  .btn span:nth-of-type(2){
    display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 100);
    color: rgba(26, 188, 156, 100);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(26, 188, 156, 100);
    margin-left: 20px;
  }



/* section ul li{
  font-size: 12px;
}
section ul li input{
  width: 184px;
  height:25px;
  padding-left: 10px;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 100);
  color:rgba(255, 255, 255, 100);
  font-size: 12px;
  font-family: Roboto;
  border: 1px solid rgba(240, 240, 240, 100);
}
section ul li:nth-of-type(2){
  margin-left:20px;
}
section ul li:nth-of-type(2) p{
  margin-top: 4px;
}
.left_text{
     font-size: 14px;
     margin-top: 10px;
  }
  .btn{
    width: 84px;
    height: 30px;
    line-height:30px;
    border-radius: 2px;
    background-color: rgba(26, 188, 156, 100);
    color: rgba(255, 255, 255, 100);
    font-size: 12px;
    text-align: center;
    font-family: Roboto;
    cursor: pointer;
    margin-left:20px;
  }
 */























</style>
